<template>
  <!-- 模拟持仓 -->
  <div class="simulatedPosition">
    <div class="simulatedPosition_head">
      <span class="simulatedPosition_head_goback" @click="goback">
        <!-- <img src="@/assets/HoldAPosition/goback.png" alt="" /> -->
        返回我的持仓
      </span>
      <span class="simulatedPosition_head_view">当前视图：模拟持仓</span>
    </div>
    <div class="simulatedPosition_main">
      <div class="HoldAPosition">
        <div class="Hold">
          <div class="Hold-top">
            <div class="Hold-clock" v-for="(item, index) in headers" :key="index">
              {{ item }}
              <span class="Hold-money">{{ money[index] }}</span>
            </div>
          </div>
          <div class="Hold-middle">
            <div class="tabList">
              <el-tabs v-model="activeName" type="border-card" class="tabs">
                <el-tab-pane name="vanilla" label="香草">
                  <vanilla></vanilla>
                </el-tab-pane>
                <el-tab-pane name="snowball" label="雪球"></el-tab-pane>
                <el-tab-pane name="purchase" label="累购"></el-tab-pane>
                <el-tab-pane name="IndexVanilla" label="指数香草"></el-tab-pane>
                <el-tab-pane name="DirectionGivers" label="指数雪球"></el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <!-- 录入 -->
        <el-dialog :visible.sync="isShowAddtion" width="30%">
          <template slot="title">
            <div class="title">添加持仓</div>
          </template>
          <div class="hr"></div>
          <el-form ref="form" :model="form" label-width="80px">
            <div class="copy">
              <textarea class="text" placeholder="在此处粘贴信息，智能识别持仓信息"></textarea>
              <div class="button">识别</div>
            </div>
            <el-form-item label="类型:">
              <div class="list">
                <div
                  :class="selectType === index ? 'one-active' : 'one'"
                  v-for="(item, index) in type"
                  :key="index"
                  @click="selectTypes(index)"
                >{{ item }}</div>
              </div>
            </el-form-item>
            <el-form-item label="标的:">
              <el-col :span="8">
                <el-input placeholder="请输入代码简称" size="small"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="结构:">
              <div class="list">
                <div
                  :class="selectStructure === index ? 'one-active' : 'one'"
                  v-for="(item, index) in structure"
                  :key="index"
                  @click="selectStructures(index)"
                >{{ item }}</div>
              </div>
            </el-form-item>
            <el-form-item label="周期:">
              <div class="list">
                <div
                  :class="selectCycle === index ? 'one-active' : 'one'"
                  v-for="(item, index) in cycle"
                  :key="index"
                  @click="selectCycles(index)"
                >{{ item }}</div>
              </div>
            </el-form-item>
            <el-form-item label="名义本金:">
              <el-col :span="8">
                <el-input size="small"></el-input>
              </el-col>
              <el-col :span="4">
                <span>万元</span>
              </el-col>
            </el-form-item>
            <el-form-item label="开仓价格:">
              <el-col :span="8">
                <el-input size="small"></el-input>
              </el-col>
              <el-col :span="5">
                <span style="color: #1570e8">现价开仓</span>
              </el-col>
            </el-form-item>
            <el-form-item label="期权费率:">
              <el-col :span="8">
                <el-input size="small"></el-input>
              </el-col>
              <el-col :span="3">
                <span>%</span>
              </el-col>
            </el-form-item>
            <el-form-item label="起始日:">
              <el-col :span="5">
                <el-date-picker size="small" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="到期日:">
              <el-col :span="5">
                <el-date-picker size="small" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="后端费率:">
              <el-col :span="8">
                <el-input size="small" placeholder="请输入"></el-input>
              </el-col>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="isShowAddtion = false" size="small">取 消</el-button>
            <el-button type="primary" size="small">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 移动到 -->
        <el-dialog :visible.sync="isShowMove" width="20%">
          <template slot="title">
            <div class="title">移动到</div>
          </template>
          <div class="hr"></div>
          <div class="selectClass">
            <div
              :class="
                moveLocation == index ? 'selectClass-active' : 'selectClass-one'
              "
              v-for="(item, index) in selectNames"
              :key="index"
              @click="changeLocation(index)"
            >{{ item }}</div>
          </div>
        </el-dialog>
        <!-- 平仓 -->
        <el-dialog :visible.sync="balance" width="20%">
          <template slot="title">
            <div class="title">平仓</div>
          </template>
          <div class="hr"></div>
          <div class="content">
            <div>
              <p class="content-name" v-for="(item, index) in nameList" :key="index">{{ item }}</p>
            </div>
            <div>
              <p class="content-date" v-for="(item, index) in dateList" :key="index">{{ item }}</p>
              <p class="content-money">
                <span>100</span>
                <span>万元</span>
              </p>
              <el-input placeholder="请输入"></el-input>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="moveLocation = -1">取 消</el-button>
            <el-button type="primary" size="small">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 价外到期 -->
        <el-dialog :visible.sync="end" width="20%">
          <template slot="title">
            <div class="title">平仓</div>
          </template>
          <div class="hr"></div>
          <div class="content">
            <div>
              <p class="content-name" v-for="(item, index) in name2List" :key="index">{{ item }}</p>
            </div>
            <div>
              <p class="content-date" v-for="(item, index) in date2List" :key="index">{{ item }}</p>
              <p class="content-money">
                <span>100</span>
                <span>万元</span>
              </p>
              <p class="content-money">
                <span>100</span>
                <span>元</span>
              </p>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="moveLocation = -1">取 消</el-button>
            <el-button type="primary" size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import vanilla from "@/components/HoldAPosition/vanilla.vue";
export default {
  name: "HoldAPosition",
  components: {
    vanilla
  },
  data() {
    return {
      value1: "",
      headers: ["投入成本（万）", "存续受益（元）", "净收益（元）"],
      money: [100, 200123, 300],
      activeName: "vanilla",
      name2List: [],
      date2List: [],
      nameList: [],
      dateList: [],
      type: [],
      cycle: [],
      structure: [],
      selectNames: "",
      isShowMove: false,
      isShowAddtion: false,
      selectType: -1,
      selectStructure: -1,
      selectCycle: -1,
      form: {}
    };
  },
  computed: {
    balance() {
      return this.moveLocation === 2 ? true : false;
    },
    end() {
      return this.moveLocation === 1 ? true : false;
    }
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    changeSelectOrdinal(index) {
      this.selectOrdinal = index;
    },
    activeAddition() {
      this.isShowAddtion = true;
    },
    activeMove() {
      this.isShowMove = true;
    },
    changeLocation(index) {
      this.isShowMove = false;
      this.moveLocation = index;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            console.log(prev, curr);
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },
    selectTypes(index) {
      this.selectType = index;
    },
    selectStructures(index) {
      this.selectStructure = index;
    },
    selectCycles(index) {
      this.selectCycle = index;
    }
  }
};
</script>

<style lang="less" scoped>
.simulatedPosition {
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px;
  &_head {
    padding: 0 10px;
    height: 40px;
    width: 100%;
    text-align: left;
    line-height: 40px;
    font-size: 14px;
    &_goback {
      display: inline-block;
      cursor: pointer;
      width: 120px;
      color: #165dff;
    }
  }
  .HoldAPosition {
    .list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .one {
      padding: 8px 18px;
      border-radius: 6px;
      background-color: #f3f3f3;
      color: #3d3d3d;
      margin: 5px 5px 5px 0px;
      line-height: 1;
    }
    .el-form-item {
      margin-bottom: 5px;
    }
    .one-active {
      padding: 8px 18px;
      border-radius: 6px;
      background-color: #1570e8;
      color: #f3f3f3;
      margin: 5px 5px 5px 0px;
      line-height: 1;
    }
    .content {
      display: flex;
      text-align: left;
      justify-content: flex-start;
      color: #3d3d3d;
      .content-name {
        line-height: 30px;
        height: 30px;
        font-size: 16px;
        width: 100px;
        margin-right: 20px;
      }
      .content-date {
        line-height: 30px;
        height: 30px;
        font-size: 16px;
      }
      .content-money {
        display: flex;
        line-height: 30px;
        height: 30px;
        font-size: 16px;
        justify-content: space-between;
      }
    }
    .title {
      font-size: 18px;
      color: #3d3d3d;
      text-align: left !important;
      line-height: 24px;
      height: 24px;
    }
    .copy {
      width: 100%;
      height: 100px;
      overflow-y: scroll;
      background-color: #f3f3f3;
      margin-bottom: 5px;
      position: relative;
      .text {
        resize: none;
        background-color: #f3f3f3;
        padding: 10px;
        width: 90%;
        height: 90px;
        border: none;
        outline: none;
      }
      .button {
        position: absolute;
        padding: 2px 12px;
        bottom: 5px;
        right: 10px;
        border-radius: 4px;
        background-color: #165dff;
        color: #f3f3f3;
      }
    }
    .hr {
      height: 1px;
      background-color: #f3f3f3;
      width: 100%;
      margin-bottom: 15px;
    }
    :deep .el-dialog__body {
      padding: 0px 20px 30px 20px;
    }
    .selectClass {
      display: flex;
      justify-content: start;
      .selectClass:hover {
        cursor: pointer;
      }
      .selectClass-active {
        margin-right: 10px;
        background-color: #3377ff;
        color: #f3f3f3;
        width: 76px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
      }
      .selectClass-one {
        margin-right: 10px;
        background-color: #f3f3f3;
        color: #1e2024;
        justify-content: center;
        display: flex;
        align-items: center;
        width: 76px;
        height: 32px;
        border-radius: 6px;
      }
    }
    // 头部
    .Hold {
      width: 100%;
    }
    .Hold-top {
      font-size: 20px;
      color: #1e2024;
      line-height: 24px;
      display: flex;
      justify-items: flex-start;
      padding-top: 10px;
      margin: 0px;
    }
    .Hold-clock {
      margin: 15px 30px 0px 10px;
    }
    .Hold-money {
      font-size: 16px;
      line-height: 20px;
      color: #e93030;
    }
    // 列表
    .Hold-middle {
      padding: 0px 10px 10px 10px;
      .tabList {
        margin: 16px 0 30px 0;
        background-color: #fff;
        width: 100%;
        height: auto;
        border-radius: 10px;
        .el-tabs--border-card {
          border-radius: 10px;
          border: none;
          box-shadow: none;
        }
        .options {
          display: flex !important;
          justify-content: space-around;
          text-align: center;
        }
      }
    }
  }
}
</style>

<style scoped>
.tabs >>> .el-tabs__header {
  border-bottom: none !important;
  background-color: #fff !important;
  border-radius: 10px 10px 0 0;
}

.tabs >>> .el-tabs__item.is-active {
  background: rgba(51, 119, 255, 0.06);
  border: 1px solid #3377ff;
  color: #3377ff;
}
.tabs >>> .title {
  /* flex-direction: row; */
  height: 30px;
  width: 400px;
  display: flex;
  align-items: center;
}

.tabs >>> .el-tabs__item {
  padding: 0 !important;
  width: 100px;
  height: 34px;
  line-height: 34px;
  border: 1px solid #ccc;
  margin: 16px 16px 0px 0px !important;
  border-radius: 3px;
  font-size: 16px;
  text-align: center;
}
.tabs >>> #tab-button {
  border: none;
  background-color: #fff;
  font-size: 14px;
  margin-left: 100px;
}

.tabs .btn {
  width: 72px;
  height: 24px;
  line-height: 24px;
  background: #3377ff;
  border-radius: 2px;
  border: none;
  margin-right: 6px;
  color: #fff;
  position: relative;
}
.tabs .btn .img {
  margin-top: 4px;
  position: absolute;
}
.tabs .btn .btn-spa {
  margin-left: 15px;
}

.el-table >>> tr {
  color: #1e2024;
}
</style>
